<template>
  <div class="page-header-index-wide">
    <a-switch @click="handleChangeStatus" v-model="isRunning"></a-switch>
    <div class="head">
      <!-- <div class="changelang" @click="changeTitleText">{{ this.lang ==='zh' ? '中文' : 'english' }}</div> -->
      <h1>
        <a href="" style="color: white">{{ titleList[0] }}</a>
      </h1>
      <div class="time">{{ currentTime }}</div>
    </div>
    <div class="mainbox">
      <ul class="clearfix">
        <li>
          <div class="boxall" style="height: 25vh">
            <div class="alltitle">{{ titleList[1] }}</div>
            <div id="echarts1" style="width: 100%; height: 20vh"></div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall" style="height: 25vh">
            <div class="alltitle1">{{ titleList[2] }}</div>
            <div id="echarts3" style="width: 100%; height: 19vh"></div>
            <div class="boxfoot"></div>
          </div>
        </li>
        <li>
          <div class="bar" style="height: 16.4vh">
            <div class="barbox" style="height: 9vh">
              <ul class="clearfix">
                <li class="pulll_left counter">{{ totalVio }}</li>
                <li class="pulll_left counter">{{ totalDan }}</li>
              </ul>
            </div>
            <div class="barbox2" style="height: 4vh">
              <ul class="clearfix">
                <li class="pulll_left">{{ titleList[3] }}</li>
                <li class="pulll_left">{{ titleList[4] }}</li>
              </ul>
            </div>
          </div>
          <div class="boxall" style="height: 34vh;">
            <div class="alltitle">{{ titleList[5] }}</div>
            <div id="echarts2" style="width: 100%; height: 27vh"></div>
            <div class="boxfoot"></div>
          </div>
        </li>
        <li>
          <div class="boxall" style="height: 25vh">
            <div class="alltitle">{{ titleList[6] }}</div>
            <div id="echarts6" style="width: 100%; height: 20vh"></div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall" style="height: 25vh">
            <div class="alltitle1">{{ titleList[7] }}</div>
            <div id="echarts9" style="width: 100%; height: 19vh"></div>
            <div class="boxfoot"></div>
          </div>
        </li>
      </ul>
      <ul class="clearfix">
        <li>
          <div class="boxall" style="height: 27vh">
            <div class="alltitle">{{ titleList[8] }}</div>
            <div id="echarts4" style="width: 100%; height: 19vh"></div>
            <div class="boxfoot"></div>
          </div>
        </li>
        <li>
          <div class="boxall" style="height: 27vh">
            <div class="alltitle">{{ titleList[9] }}</div>
            <div id="echarts8" style="width: 100%; height: 20vh"></div>
            <div class="boxfoot"></div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
import zhTranslations from '@/lang/zh.json'
import enTranslations from '@/lang/en.json'
import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  RankList,
  Bar,
  Trend,
  NumberInfo,
  MiniSmoothArea
} from '@/components'
import { getVioTypeAnalysis, getDanTypeAnalysis, getVioWorkSpeAnalysis, getDanWorkSpeAnalysis, getDanSecondAnalysis, getVioSecondAnalysis, getTotalNumAndTrend } from '@/api/modular/system/QHSEAnalysisPage'
// import { mixinDevice } from '@/utils/mixin'
import * as echarts from 'echarts'
import { getQHSETimerStart, getQHSETimerClose, getQHSETimerIsRunning } from '@/api/modular/system/QHSESetTimroutManager'
export default {
  name: 'Analysis',
  // mixins: [mixinDevice],
  components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea
  },
  data() {
    return {
      loading: true,
      currentTime: '',
      totalVio: 0,
      totalDan: 0,
      titleList: [],
      lang: '',
      isRunning: false
    }
  },
  created() {
    this.initTitle()
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    getQHSETimerIsRunning().then(res => {
      this.isRunning = res.isRunning
      console.log('this.isRunning', this.isRunning)
    })
  },
  mounted() {
    this.changeTitleText()
    this.updateTime()
    this.loadData3()
    this.loadLineData()
    this.loadData1()
    this.loadData4()
    this.loadData5()
    this.loadData6()
    this.loadData2()
  },
  computed: {
    status() {
      return this.$store.state.isEnglish
    }
  },
  watch: {
    status() {
      this.changeTitleText()
    }
  },
  methods: {
    handleChangeStatus (value) {
      if (value) {
        this.getQHSETimerStart()
      } else {
        this.getQHSETimerClose()
      }
    },
    getQHSETimerStart () {
      getQHSETimerStart()
    },
    getQHSETimerClose () {
      getQHSETimerClose()
    },
    updateTime() {
      const now = moment()
      this.currentTime = now.format('YYYY/MM/DD')
    },
    initTitle() {
      this.lang = this.$store.state.lang
      this.titleList = ['违章隐患分析', '违章级别占比', '今年各作业专业违章数量', '本年度违章总数', '本年度隐患总数', '本年违章/隐患趋势',
       '隐患级别占比', '今年各作业专业隐患数量', '二级单位违章数量', '二级单位隐患数量']
    },
    translateText(text) {
      // 遍历中文翻译文件中的所有键值对
      for (const [key, value] of Object.entries(zhTranslations.menu)) {
          // 如果找到对应的中文标题，获取对应的英文翻译标题键
          if (value === text) {
            // 检查英文翻译文件中是否存在对应的英文翻译标题
            if (enTranslations.menu.hasOwnProperty(key)) {
              // 返回对应的英文翻译
              return enTranslations.menu[key]
            }
            return text
          }
        }
      // 如果不存在，则返回原始中文文本
      return text
    },
    changeTitleText() {
      this.lang = this.$store.state.lang
      // console.log('aaa:', this.lang)
      if (this.lang === 'en') {
          this.titleList.forEach((title, index) => {
          const translatedText = this.translateText(title)
          this.$set(this.titleList, index, translatedText)
        })
        // this.lang = 'en'
      } else {
        this.initTitle()
      }
    },
    echarts1(data) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echarts1'))
      const pieChartData = data.map(item => ({
        value: item.value,
        name: item.name
      }))
      const xData = pieChartData.map(item => item.name)
      const option = {
        tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
        },
        legend: {
            right: 10,
            top: 10,
            height: 160,
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 10,
            textStyle: {
                color: 'rgba(255,255,255,.6)',
                fontSize: 11
            },
            orient: 'vertical',
            data: xData
        },
        calculable: true,
        series: [
        {
          name: ' ',
          color: ['#62c98d', '#2f89cf', '#4cb9cf', '#53b666', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#7562c9', '#c96262'],
          type: 'pie',
          radius: [30, 70],
          center: ['35%', '50%'],
          roseType: 'radius',
          label: {
              show: false
          },
          data: pieChartData
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      window.addEventListener('resize', function() {
          myChart.resize()
      })
    },
    echarts2(data) {
      var myChart = echarts.init(document.getElementById('echarts2'))
      if (data === undefined) {
        return
      }
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        grid: {
          top: '20px',
          right: '0%',
          bottom: '0px',
          left: '0%',
          containLabel: true
        },
        legend: {
          data: ['隐患数', '违章数'],
          right: 'center',
          width: '100%',
          textStyle: {
            color: '#fff'
          },
          itemWidth: 12,
          itemHeight: 10
        },
        xAxis:
        {
          type: 'category',
          data: data.violationTrend.map(item => item.Name),
          axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },
          axisLabel: { color: 'rgba(255,255,255,.7)', fontSize: '14' }
        },
        yAxis:
        {
          type: 'value',
          axisTick: { show: false },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: true,
            color: 'rgba(255,255,255,.6)'
          }
        },
        series: [
          {
            name: '隐患数',
            type: 'line',
            areaStyle: {},
            smooth: true,
            data: data.dangerTrend.map(item => item.Value),
            barWidth: '40%',
            itemStyle: {
              borderRadius: 15,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#8bd46e'
              },
              {
                offset: 1,
                color: '#09bcb7'
              }])
            },
            barGap: '0.2'
          },
          {
            name: '违章数',
            type: 'line',
            areaStyle: {},
            smooth: true,
            data: data.violationTrend.map(item => item.Value),
            barWidth: '40%',
            itemStyle: {
              borderRadius: 15,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#248ff7'
              },
              {
                  offset: 1,
                  color: '#6851f1'
              }])
            },
            barGap: '0.2'
          }
        ]
      }
      myChart.setOption(option)
      window.addEventListener('resize', function() {
          myChart.resize()
      })
    },
    echarts3(data) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echarts3'))
      const barChartData = data.map(item => ({
        value: item.value,
        name: item.name
      }))
      const xData = barChartData.map(item => item.name)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'shadow'
          }
        },
        grid: {
          left: '0%',
          top: '20px',
          right: '0%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
            data: xData,
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,.1)',
                width: 1,
                type: 'solid'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: function(index, value) {
                // 控制间隔显示，每隔三个显示一个
                return index % 4 === 0
              },
              show: true,
              splitNumber: 15,
              color: 'rgba(255,255,255,.6)',
              fontSize: '13'
            }
          }],
          yAxis: [{
            type: 'value',
            axisLabel: {
              // formatter: '{value} %'
              show: true,
              color: 'rgba(255,255,255,.6)'
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                  color: 'rgba(255,255,255,.1	)',
                  width: 1,
                  type: 'solid'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.1)'
              }
            }
          }],
          series: [{
            name: '违章',
            type: 'bar',
            data: barChartData,
            label: {
              show: false,
              position: 'top',
              color: 'rgba(255,255,255,.7)'
            },
            barWidth: '15', // 柱子宽度
            // barGap: 1, // 柱子之间间距
            itemStyle: {
                color: '#2f89cf',
                opacity: 1,
                borderRadius: 5
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      window.addEventListener('resize', function() {
          myChart.resize()
      })
    },
    echarts4(data) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echarts4'))
      const barChartData = data.map(item => ({
        value: item.value,
        name: item.name
      }))
      const xData = barChartData.map(item => item.name)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        grid: {
          top: 20,
          right: 20,
          bottom: 0,
          left: '1%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: xData,
          axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },
            axisLabel: { color: 'rgba(255,255,255,.7)', fontSize: '14' }
        }],
        yAxis: [{
          type: 'value',
          name: '单位1',
          splitLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            show: true,
            color: 'rgba(255,255,255,.6)'
          },
          axisLine: {
            lineStyle: { color: 'rgba(255,255,255,.1)' },
            show: true
          } // 左线色
        }
        ],
        series: [{
          name: '数量',
          type: 'bar',
          data: barChartData,
          barWidth: '40%',
          label: {
            show: false,
            position: 'top',
            color: 'rgba(255,255,255,.7)'
          },
          itemStyle: {
            borderRadius: 15,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#fccb05'
            },
            {
              offset: 1,
              color: '#f5804d'
            }])
          },
          barGap: '0'
        }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      window.addEventListener('resize', function() {
          myChart.resize()
      })
    },
    echarts6(data) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echarts6'))
      const pieChartData = data.map(item => ({
        value: item.value,
        name: item.name
      }))
      const xData = pieChartData.map(item => item.name)
      const option = {
        tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
        },
        legend: {
            right: 10,
            top: 20,
            height: 140,
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 10,
            textStyle: {
                color: 'rgba(255,255,255,.6)',
                fontSize: 13
            },
            orient: 'vertical',
            data: xData
        },
        calculable: true,
        series: [
        {
          name: ' ',
          color: ['#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#7562c9', '#c96262'],
          type: 'pie',
          radius: [30, 70],
          center: ['35%', '50%'],
          roseType: 'radius',
          label: {
            show: false
          },
          data: pieChartData
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      window.addEventListener('resize', function() {
          myChart.resize()
      })
    },
    echarts8(data) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echarts8'))
      const barChartData = data.map(item => ({
        value: item.value,
        name: item.name
      }))
      const xData = barChartData.map(item => item.name)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        grid: {
          top: 20,
          right: 20,
          bottom: 0,
          left: '1%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: xData,
          axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },
            axisLabel: { color: 'rgba(255,255,255,.7)', fontSize: '14' }
        }],
        yAxis: [{
          type: 'value',
          splitLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            show: true,
            color: 'rgba(255,255,255,.6)'
          },
          axisLine: {
            lineStyle: { color: 'rgba(255,255,255,.1)' },
            show: true
          }
        }
        ],
        series: [{
          name: '数量',
          type: 'bar',
          data: barChartData,
          barWidth: '40%',
          label: {
            show: false,
            position: 'top',
            color: 'rgba(255,255,255,.7)'
          },
          itemStyle: {
            borderRadius: 15,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#FA8072'
            },
            {
              offset: 1,
              color: '#A52A2A'
            }])
          },
          barGap: '0'
        }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      window.addEventListener('resize', function() {
          myChart.resize()
      })
    },
    echarts9(data) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echarts9'))
      const barChartData = data.map(item => ({
        value: item.value,
        name: item.name
      }))
      const xData = barChartData.map(item => item.name)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'shadow'
          }
        },
        grid: {
          left: '0%',
          top: '20px',
          right: '0%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
            data: xData,
            axisLine: {
              show: false,
              lineStyle: {
                color: 'rgba(255,255,255,.1)',
                width: 1,
                type: 'solid'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: function(index, value) {
                // 控制间隔显示，每隔三个显示一个
                return index % 4 === 0
              },
              // rotate:50,
              show: true,
              splitNumber: 15,
              color: 'rgba(255,255,255,.6)',
              fontSize: '13'
            }
          }],
          yAxis: [{
            type: 'value',
            axisLabel: {
              // formatter: '{value} %'
              show: true,
              color: 'rgba(255,255,255,.6)'
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                  color: 'rgba(255,255,255,.1	)',
                  width: 1,
                  type: 'solid'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.1)'
              }
            }
          }],
          series: [
          {
            name: '隐患',
            type: 'bar',
            label: {
              show: false,
              position: 'top',
              color: 'rgba(255,255,255,.7)'
            },
            data: barChartData,
            barWidth: '15',
            // barGap: 1,
            itemStyle: {
              color: '#62c98d',
              opacity: 1,
              borderRadius: 5
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      window.addEventListener('resize', function() {
          myChart.resize()
      })
    },
    loadData1() {
      getVioWorkSpeAnalysis()
        .then(res => {
          this.echarts3(res)
        })
        // .catch(error => {
        //   // 处理请求错误
        //   console.error(error)
        //   // 显示错误信息
        //   this.$message.error('获取数据失败')
        // })
    },
    loadData2() {
      getDanWorkSpeAnalysis()
        .then(res => {
          this.echarts9(res)
        })
        // .catch(error => {
        //   // 处理请求错误
        //   console.error(error)
        //   // 显示错误信息
        //   this.$message.error('获取数据失败')
        // })
    },
    loadData3() {
      getVioTypeAnalysis()
        .then(res => {
          this.echarts1(res)
        })
        // .catch(error => {
        //   // 处理请求错误
        //   console.error(error)
        //   // 显示错误信息
        //   this.$message.error('获取数据失败')
        // })
    },
    loadData4() {
      getDanTypeAnalysis()
        .then(res => {
          this.echarts6(res)
        })
        // .catch(error => {
        //   // 处理请求错误
        //   console.error(error)
        //   // 显示错误信息
        //   this.$message.error('获取数据失败')
        // })
    },
    loadData5() {
      getDanSecondAnalysis()
        .then(res => {
          this.echarts8(res)
        })
        // .catch(error => {
        //   // 处理请求错误
        //   console.error(error)
        //   // 显示错误信息
        //   this.$message.error('获取数据失败')
        // })
    },
    loadData6() {
      getVioSecondAnalysis()
        .then(res => {
          this.echarts4(res)
        })
        // .catch(error => {
        //   // 处理请求错误
        //   console.error(error)
        //   // 显示错误信息
        //   this.$message.error('获取数据失败')
        // })
    },
    loadLineData() {
      getTotalNumAndTrend()
        .then(res => {
          // console.log('res:', res)
          this.echarts2(res)
          this.totalDan = res.DangerTotal
          this.totalVio = res.ViolationTotal
        })
        // .catch(error => {
        //   // 处理请求错误
        //   console.error(error)
        //   // 显示错误信息
        //   this.$message.error('获取数据失败')
        // })
    }
  }
}
</script>
<style lang='less' scoped>
.page-header-index-wide {
  background: #000d4a url(../../../assets/images/bg.jpg) center top;
  background-size: cover;
  color: #666;
  overscroll-behavior: none;
}
li{ list-style-type:none;}
i{ margin:0px; padding:0px; text-indent:0px;}
img{ border:none; max-width: 100%;}
a{ text-decoration:none; color:#399bff;}
a.active,a:focus{ outline:none!important; text-decoration:none;}
ol,ul,p,h1,h2,h3,h4,h5,h6{ padding:0; margin:0}
a:hover{ color:#06c; text-decoration: none!important}

.clearfix:after, .clearfix:before {
	display: table;
	content: ' '
}
 .clearfix:after {
	clear: both
}
.pulll_left{float:left;}
.pulll_right{float:right;}
.head {
  height: 4.5rem;
  background: url(../../../assets/images/head_bg.png) no-repeat center center;
  background-size: 100% 100%;
  position: relative;
}
.head h1 {
  color: #fff;
  text-align: center;
  font-size: 1.8rem;
  line-height: 4rem;
}
.weather {
  position: absolute;
  color: #fff;
  right: 3rem;
  top: 0;
  line-height: 4.5rem;
}
@font-face{font-family:electronicFont; src:url(../../../assets/font/DS-DIGIT.TTF)}
.time{ position:absolute; right:1.5rem; top:0; line-height: 3rem;color:rgba(255,255,255,.7); font-size: 1.5rem; padding-right: 1rem;font-family:electronicFont;}
.mainbox{ padding:0rem 1rem 0rem 1rem;}
.mainbox>ul{ margin-left:-.4rem; margin-right:-.4rem;}
.mainbox>ul>li{ float: left; padding: 0 .4rem}
.mainbox>ul>li{ width: 30%}
.mainbox>ul>li:nth-child(2){ width: 40%}
.mainbox>ul:nth-child(2)>li{ width: 50%}

.boxall{ border: 1px solid rgba(25,186,139,.17); padding:0 .3rem .3rem .3rem;  background: rgba(255,255,255,.04) url(../../../assets/images/line.png); background-size: 100% auto; position: relative; margin-bottom: .3rem; z-index: 10;}
.boxall:before,
.boxall:after{ position:absolute; width: 1rem; height: 1rem; content: '';  border-top: 2px solid #02a6b5; top: 0;}
.boxall:before,.boxfoot:before{border-left: 2px solid #02a6b5;left: 0;}
.boxall:after,.boxfoot:after{border-right: 2px solid #02a6b5; right: 0;}
.alltitle{ font-size:1.2rem; color:#fff; text-align: center; line-height: 3rem; border-bottom:2px solid rgba(255,255,255,.2);}
.alltitle1{ font-size:1rem; color:#fff; text-align: center; line-height: 3rem; border-bottom:2px solid rgba(255,255,255,.2);}

.boxfoot{ position:absolute; bottom: 0; width: 100%; left: 0;}
.boxfoot:before,
.boxfoot:after{ position:absolute; width: 1rem; height: 1rem;  content: '';border-bottom: 2px solid #02a6b5; bottom: 0;}

.bar{background:rgba(101,132,226,.1); padding: 1rem;}
.barbox li,.barbox2 li{ width:50%; text-align: center; position: relative;}
.barbox:before,
.barbox:after{ position:absolute; width: 2rem; height: 1rem; content: ''; }
.barbox:before{border-left: 2px solid #02a6b5;left: 0;border-top: 2px solid #02a6b5; }
.barbox:after{border-right: 2px solid #02a6b5; right: 0; bottom: 0;border-bottom: 2px solid #02a6b5; }

.barbox li:first-child:before{ position:absolute; content: ''; height:50%; width: 1px; background: rgba(255,255,255,.2); right: 0; top: 25%;}

.barbox{  border: 2px solid rgba(25,186,139,.17); position: relative;}
.barbox li{ font-size: 3rem; color: #ffeb7b; padding: 0.5rem 0;  font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-weight: bold;}
.barbox2 li{ font-size: 1.0rem; color: #91a6c2; padding-top: 0.5rem;}

.map{  position:relative; height: 30rem; z-index: 9;}
.map4{ width: 200%; height:20rem;  position: relative; left: -50%; top: 4%; margin-top: 2rem; z-index: 5;}
.map1,.map2,.map3{ position:absolute;}
.map1{ width:29rem; z-index: 2;top: 0rem; left: 15%;  animation: myfirst2 15s infinite linear;}
.map2{ width:27rem; top:0rem; left: 20%; z-index: 3; opacity: 0.2; animation: myfirst 10s infinite linear;}
.map3{ width:22rem; top:3rem; left: 25%; z-index: 1;}

.tabs { text-align: center; padding: .1rem 0 0 0;}
.tabs a {
    position: relative;
    display: inline-block;
    margin-left: 1px;
    padding:.05rem .2rem;
    color: #898989;
    transition: all .3s ease-out 0s;
    font-size: 14px;
}
.tabs li{ display:inline-block;}
.tabs a:after {
    position: absolute;
    width: 1px;
    height: 10px;
    background-color: rgba(255,255,255,.1);
    content: '';
    margin-left:0;
    right:-1px;
    margin-top: 7px;
}
.tabs li a.active {border: 1px solid rgba(25,186,139,.17); background: rgba(255,255,255,.05); color:#fff;}
.tit02{ text-align:center; margin: .1rem 0; position: relative}
.tit02 span{border: 1px solid rgba(25,186,139,.17); letter-spacing: 2px; padding: .01rem .2rem; background: rgba(255,255,255,.05);  font-size: .18rem;  color: #49bcf7;}
.tit02:before,.tit02:after{ position:absolute; width:26%; height: 1px;background: rgba(25,186,139,.2);  content: ''; top: .12rem;}
.tit02:after{ right:0;}
.tit02:before{ left:0;}

.wrap{ height:2.54rem; overflow: hidden;}
.wrap li{  line-height:.42rem; height:.42rem; font-size: .18rem; text-indent: .24rem; margin-bottom: .1rem; }
.wrap li p{border: 1px solid rgba(25,186,139,.17);color: rgba(255,255,255,.6); }
.sy{ float:left; width: 33%; height: 2.2rem; margin-top: -.25rem;}
.adduser{ height:1.5rem; overflow: hidden;}
.adduser li{height:.5rem;}
.adduser img{ width: .40rem; border-radius: .5rem; margin-right: .1rem; display: inline-block; vertical-align: middle;}
.adduser span{  line-height:.5rem; font-size: .18rem;color: rgba(255,255,255,.6); }
.sycm ul{ margin-left:-.5rem;margin-right:-.5rem;  padding: .16rem 0;}
.sycm li{ float: left; width: 33.33%; text-align: center; position: relative}
.sycm li:before{ position:absolute; content: ''; height:30%; width: 1px; background: rgba(255,255,255,.1); right: 0; top: 15%;}
.sycm li:last-child:before{ width: 0;}
.sycm li h2{ font-size:.3rem; color: #c5ccff;}
.sycm li span{ font-size:.18rem; color: #fff; opacity: .5;}

@keyframes myfirst2
{
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}

@keyframes myfirst
{
from {transform: rotate(0deg);}
to {transform: rotate(-359deg);}
}

.horizontal-list {
  clear: both;
  display: flex;
  list-style: none;
  padding: 0;
}
.horizontal-list li {
  flex: 1;
  text-align: center;
}
</style>
